<template>
    <div>
        <notifications 
        group="notifications-custom-template" 
        :duration="5000" 
        position="bottom right">
            <template slot="body" slot-scope="props">
            <div class="media bg-primary text-white p-3 mb-2" @click="props.close">
                <div class="media align-items-center w-100">
                    <div class="mr-3">
                        <i v-class="props.item.notificationClass" style="font-size: 250%;"></i>
                    </div>
                    <div class="media-body">
                        <strong>{{ props.item.title }}</strong><br>
                        {{ props.item.text }}
                    </div>
                </div>
            </div>
            </template>
        </notifications>
    </div>
</template>

<style>
</style>

<script>
import Notifications from "vue-notification"
export default {
    name: "sky-notifications",
}
</script>
